<template>
  <div class="page">
    <van-nav-bar
        title="个人中心"
        left-text="返回"
        left-arrow
        @click-left="handleBack"
    />
    <div class="content" v-if="isAuthenticated">
      <img v-if="user" src="@/assets/头像.jpg" alt="头像" class="avatar" />
      <h1 class="title" v-if="user">{{ user.name }}</h1>
      <van-field v-if="user" v-model="user.userNo" label="学号/职工号" disabled />
      <van-field v-if="user" v-model="user.type" label="用户类型" disabled />
      <van-field v-if="user" v-model="user.email" label="邮箱" disabled />
      <van-field v-if="user" v-model="user.dormGroup" label="宿舍组团" disabled />
      <van-field v-if="user" v-model="user.dormBuilding" label="宿舍楼栋" disabled />
      <van-field v-if="user" v-model="user.dormRoom" label="宿舍号" disabled />
      <van-button v-if="user" type="primary" block @click="showEditDialog = true">修改个人信息</van-button>
      <van-button v-if="user" type="danger" block @click="onLogout">退出登录</van-button>
    </div>
    <div class="content" v-else>
      <p>当前未登录</p>
      <van-button type="primary" block @click="navigateToLogin">登录</van-button>
    </div>
    <van-tabbar v-model="activeTab" fixed bottom>
      <van-tabbar-item icon="home-o" @click="navigateTo('home')">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="navigateTo('messages')">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="navigateTo('personal-center')">个人中心</van-tabbar-item>
    </van-tabbar>
    <Alert v-if="showToast" :theme="toastTheme" :message="toastMessage" :duration="3000" />
    <van-dialog v-model:show="showEditDialog" title="修改个人信息" show-cancel-button @confirm="onSave">
      <van-field v-model="editUser.email" label="邮箱" />
      <van-field v-model="editUser.dormGroupText" label="宿舍组团" readonly clickable @click="showDormGroupActionSheet = true" />
      <van-action-sheet
          v-model:show="showDormGroupActionSheet"
          :actions="dormGroupOptions"
          @select="onDormGroupSelect"
          cancel-text="取消"
      />
      <van-field v-model="editUser.dormBuildingText" label="宿舍楼栋" readonly clickable @click="showDormBuildingActionSheet = true" />
      <van-action-sheet
          v-model:show="showDormBuildingActionSheet"
          :actions="dormBuildingOptions"
          @select="onDormBuildingSelect"
          cancel-text="取消"
      />
      <van-field v-model="editUser.dormRoom" label="宿舍号" />
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import axios from 'axios';
import Alert from '../MessageAlert.vue';

const router = useRouter();
const store = useStore();
const user = computed(() => store.state.user);
const isAuthenticated = computed(() => store.getters.isAuthenticated);

const activeTab = ref(2); // 个人中心
const showToast = ref(false);
const toastMessage = ref('');
const toastTheme = ref('info');
const showEditDialog = ref(false);
const showDormGroupActionSheet = ref(false);
const showDormBuildingActionSheet = ref(false);

const editUser = ref({ ...user.value });

const dormGroupOptions = [
  {name: '一号组团'},
  {name: '二号组团'},
  {name: '三号组团'},
  {name: '学府雁苑'}
];

const dormBuildingOptions = [
  {name: '#1'}, {name: '#2'}, {name: '#3'}, {name: '#4'}, {name: '#5'},
  {name: '#6'}, {name: '#7'}, {name: '#8'}, {name: '#9'}, {name: '#10'},
  {name: '#11'}, {name: '#12'}, {name: '#13'}, {name: '#14'}, {name: '#15'},
  {name: '#16'}, {name: '#17'}, {name: '#18'}, {name: '#19'}, {name: '#20'},
  {name: '#21'}, {name: '#22'}, {name: '#23'}, {name: '#24'}, {name: '#25'},
  {name: '#26'}, {name: '#27'}, {name: '#28'}, {name: '#29'}, {name: '#30'},
  {name: 'A区'}, {name: 'B区'}, {name: 'C区'}, {name: 'D区'}
];

const handleBack = () => {
  router.back();
};

const navigateTo = (page) => {
  router.push(`/${page}`);
};

const navigateToLogin = () => {
  router.push('/student');
};

const showAlert = (message, theme) => {
  toastMessage.value = message;
  toastTheme.value = theme;
  showToast.value = true;
};

const onDormGroupSelect = (option) => {
  editUser.value.dormGroup = option.name;
  editUser.value.dormGroupText = option.name;
  showDormGroupActionSheet.value = false;
};

const onDormBuildingSelect = (option) => {
  editUser.value.dormBuilding = option.name;
  editUser.value.dormBuildingText = option.name;
  showDormBuildingActionSheet.value = false;
};

const onSave = async () => {
  try {
    const response = await axios.post('http://localhost:8000/users/update', editUser.value);
    if (response.data.success) {
      showAlert('信息更新成功', 'success');
      store.dispatch('login', response.data.user); // 更新Vuex中的用户信息
      showEditDialog.value = false;
    } else {
      showAlert('信息更新失败', 'error');
    }
  } catch (error) {
    console.error('信息更新失败:', error);
    showAlert('信息更新失败，请重试', 'error');
  }
};

const onLogout = () => {
  store.dispatch('logout');
  router.push('/student');
};
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.title {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.van-field {
  margin-bottom: 10px;
  width: 100%;
}

.van-button {
  margin-top: 20px;
}
</style>
